<script setup lang="ts">
import { ref } from 'vue'

// 当前体重数据
const currentWeight = ref(62.3)
const lastUpdateDate = ref('2023-07-20')
const pregnancyWeightGain = ref(4.8)
const targetWeight = ref(65.5)
const bmiValue = ref(22.8)
const prePregnancyWeight = ref(57.5)

// 孕期进度数据
const currentWeek = ref(24)
const totalWeek = ref(40)
const progressPercent = ref(60)

// 记录表单数据
const recordDate = ref('2023-07-20')
const recordWeight = ref(62.3)
const recordNote = ref('')

// 图表数据
const chartTabs = ref([
    { name: '月', active: false },
    { name: '季度', active: true },
    { name: '孕期', active: false }
])

// 历史记录数据
const weightRecords = ref([
    {
        label: '今天',
        date: '2023-07-20',
        weight: 62.3,
        change: 0.2,
        status: 'normal' // normal, warning, danger
    },
    {
        label: '上周',
        date: '2023-07-13',
        weight: 62.1,
        change: 0.3,
        status: 'normal'
    },
    {
        label: '两周前',
        date: '2023-07-06',
        weight: 61.8,
        change: 0.2,
        status: 'normal'
    },
    {
        label: '三周前',
        date: '2023-06-29',
        weight: 61.6,
        change: 0.5,
        status: 'warning'
    }
])

// 切换图表选项卡
const switchChartTab = (index: number) => {
    chartTabs.value.forEach((tab, i) => {
        tab.active = i === index
    })
}

// 日期选择器变更
const onDateChange = (e: any) => {
    recordDate.value = e.detail.value
}

// 保存记录
const saveRecord = () => {
    uni.showToast({
        title: '记录已保存',
        icon: 'success'
    })
}

// 查看更多记录
const viewMoreRecords = () => {
    uni.showToast({
        title: '查看更多记录',
        icon: 'none'
    })
}

// 查看趋势图表
const viewTrendChart = () => {
    uni.showToast({
        title: '查看详细图表',
        icon: 'none'
    })
}

// 返回上一页
const goBack = () => {
    uni.navigateBack()
}
</script>

<template>
    <view class="weight-management">
        <!-- 页面头部 -->
        <view class="header">
            <view class="header-left">
                <text class="back-icon" @click="goBack">
                    <text class="iconfont icon-arrow-left"></text>
                </text>
                <text class="page-title">体重管理</text>
            </view>
            <view class="header-right">
                <text class="chart-icon" @click="viewTrendChart">
                    <text class="iconfont icon-chart-line"></text>
                </text>
            </view>
        </view>

        <!-- 主内容区 -->
        <view class="main-content">
            <!-- 体重概览 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-weight"></text>
                    <text>体重概览</text>
                </view>

                <!-- 当前体重 -->
                <view class="weight-stat">
                    <view class="weight-value"
                        >{{ currentWeight }} <text class="unit">公斤</text></view
                    >
                    <view class="weight-label">当前体重</view>
                    <view class="weight-update-time">最后更新: {{ lastUpdateDate }}</view>
                </view>

                <!-- 体重指标 -->
                <view class="weight-indicators">
                    <view class="indicator-item">
                        <view class="indicator-label">孕期增重</view>
                        <view class="indicator-value">+{{ pregnancyWeightGain }}公斤</view>
                        <view class="indicator-status status-normal">标准范围</view>
                    </view>
                    <view class="indicator-item">
                        <view class="indicator-label">目标体重</view>
                        <view class="indicator-value">{{ targetWeight }}公斤</view>
                        <view class="indicator-status">孕期末</view>
                    </view>
                    <view class="indicator-item">
                        <view class="indicator-label">BMI指数</view>
                        <view class="indicator-value">{{ bmiValue }}</view>
                        <view class="indicator-status status-normal">正常</view>
                    </view>
                </view>

                <!-- 孕期体重增长进度 -->
                <view class="progress-section">
                    <view class="progress-header">
                        <view class="progress-title">孕期体重增长进度</view>
                        <view class="progress-week">{{ currentWeek }}周 / {{ totalWeek }}周</view>
                    </view>

                    <view class="progress-container">
                        <view class="progress-bar" :style="{ width: progressPercent + '%' }"></view>
                    </view>

                    <view class="progress-labels">
                        <view class="progress-label">孕前：{{ prePregnancyWeight }}公斤</view>
                        <view class="progress-label">当前：{{ currentWeight }}公斤</view>
                        <view class="progress-label">目标：{{ targetWeight }}公斤</view>
                    </view>
                </view>
            </view>

            <!-- 记录体重 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-plus-circle"></text>
                    <text>记录体重</text>
                </view>

                <view class="form">
                    <view class="form-group">
                        <text class="form-label">日期</text>
                        <picker
                            mode="date"
                            :value="recordDate"
                            @change="onDateChange"
                            class="form-picker"
                        >
                            <view class="form-input">{{ recordDate }}</view>
                        </picker>
                    </view>

                    <view class="form-group">
                        <text class="form-label">体重 (公斤)</text>
                        <view class="form-input-container">
                            <input
                                type="digit"
                                class="form-input"
                                placeholder="输入体重"
                                v-model="recordWeight"
                            />
                            <text class="form-input-suffix">公斤</text>
                        </view>
                    </view>

                    <view class="form-group">
                        <text class="form-label">备注 (可选)</text>
                        <input
                            type="text"
                            class="form-input"
                            placeholder="添加备注，如饮食情况、运动等"
                            v-model="recordNote"
                        />
                    </view>

                    <button class="button-primary" @click="saveRecord">保存记录</button>
                </view>
            </view>

            <!-- 体重变化图表 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-chart-line"></text>
                    <text>体重变化趋势</text>
                </view>

                <!-- 时间范围选择 -->
                <view class="tabs">
                    <view
                        v-for="(tab, index) in chartTabs"
                        :key="index"
                        :class="['tab', { active: tab.active }]"
                        @tap="switchChartTab(index)"
                    >
                        {{ tab.name }}
                    </view>
                </view>

                <!-- 图表区域 -->
                <view class="chart-container">
                    <!-- Y轴 -->
                    <view class="chart-y-axis">
                        <text class="y-axis-label">68</text>
                        <text class="y-axis-label">66</text>
                        <text class="y-axis-label">64</text>
                        <text class="y-axis-label">62</text>
                        <text class="y-axis-label">60</text>
                        <text class="y-axis-label">58</text>
                    </view>

                    <!-- 图表区域 -->
                    <view class="chart-area">
                        <!-- 推荐范围区域 -->
                        <view class="chart-recommended-range"></view>

                        <!-- 网格线 -->
                        <view class="chart-grid-line" style="top: 20%"></view>
                        <view class="chart-grid-line" style="top: 40%"></view>
                        <view class="chart-grid-line" style="top: 60%"></view>
                        <view class="chart-grid-line" style="top: 80%"></view>

                        <!-- 体重曲线 - 使用图片代替SVG，因为uniapp对SVG支持有限 -->
                        <view class="weight-line">
                            <!-- 在实际应用中，这里应该使用echarts等图表库 -->
                            <view class="data-point" style="left: 20rpx; top: 150rpx"></view>
                            <view class="data-point" style="left: 50rpx; top: 145rpx"></view>
                            <view class="data-point" style="left: 80rpx; top: 140rpx"></view>
                            <view class="data-point" style="left: 110rpx; top: 135rpx"></view>
                            <view class="data-point" style="left: 140rpx; top: 125rpx"></view>
                            <view class="data-point" style="left: 170rpx; top: 115rpx"></view>
                            <view class="data-point" style="left: 200rpx; top: 105rpx"></view>
                            <view class="data-point" style="left: 230rpx; top: 100rpx"></view>
                            <view class="data-point" style="left: 260rpx; top: 90rpx"></view>
                            <view class="data-point" style="left: 290rpx; top: 85rpx"></view>
                        </view>
                    </view>

                    <!-- X轴 -->
                    <view class="chart-x-axis">
                        <text class="x-axis-label">4月</text>
                        <text class="x-axis-label">5月</text>
                        <text class="x-axis-label">6月</text>
                        <text class="x-axis-label">7月</text>
                    </view>
                </view>

                <view class="chart-note">绿色区域为推荐体重增长范围</view>
            </view>

            <!-- 历史记录 -->
            <view class="card margin-bottom">
                <view class="card-title">
                    <text class="iconfont icon-history"></text>
                    <text>历史记录</text>
                </view>

                <!-- 记录列表 -->
                <view class="record-list">
                    <view v-for="(record, index) in weightRecords" :key="index" class="record-item">
                        <view class="record-info">
                            <view class="record-date-label">{{ record.label }}</view>
                            <view class="record-date">{{ record.date }}</view>
                        </view>
                        <view class="record-weight">
                            <view class="record-weight-value"
                                >{{ record.weight
                                }}<text class="record-weight-unit">公斤</text></view
                            >
                            <view
                                :class="[
                                    'record-weight-change',
                                    {
                                        'status-normal': record.status === 'normal',
                                        'status-warning': record.status === 'warning',
                                        'status-danger': record.status === 'danger'
                                    }
                                ]"
                                >+{{ record.change }}公斤</view
                            >
                        </view>
                    </view>
                </view>

                <button class="button-secondary" @click="viewMoreRecords">查看更多记录</button>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.weight-management {
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #ffffff;
    padding: 24rpx 32rpx 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f0f0f0;
}

.header-left {
    display: flex;
    align-items: center;
}

.back-icon {
    margin-right: 16rpx;
    font-size: 36rpx;
}

.page-title {
    font-size: 36rpx;
    font-weight: 500;
}

.chart-icon {
    font-size: 36rpx;
    color: #333;
}

.main-content {
    flex: 1;
    padding: 32rpx;
    background-color: #f9f9f9;
    overflow-y: auto;
}

.card {
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 32rpx;
}

.card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
}

.card-title .iconfont {
    margin-right: 16rpx;
    color: #ff9fb5;
}

.weight-stat {
    text-align: center;
    padding: 32rpx 0;
}

.weight-value {
    font-size: 72rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 8rpx;
}

.unit {
    font-size: 28rpx;
}

.weight-label {
    font-size: 28rpx;
    color: #666;
}

.weight-update-time {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
}

.weight-indicators {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24rpx;
    margin-bottom: 32rpx;
}

.indicator-item {
    background-color: #f5f5f5;
    padding: 24rpx;
    border-radius: 16rpx;
    text-align: center;
}

.indicator-label {
    font-size: 24rpx;
    color: #999;
}

.indicator-value {
    font-size: 28rpx;
    font-weight: 500;
    margin-top: 8rpx;
}

.indicator-status {
    font-size: 24rpx;
    color: #999;
    margin-top: 4rpx;
}

.status-normal {
    color: #4caf50;
}

.status-warning {
    color: #ff9800;
}

.status-danger {
    color: #f44336;
}

.progress-section {
    background-color: #e3f2fd;
    padding: 24rpx;
    border-radius: 16rpx;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16rpx;
}

.progress-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #1565c0;
}

.progress-week {
    font-size: 24rpx;
    color: #1565c0;
}

.progress-container {
    height: 16rpx;
    background-color: #bbdefb;
    border-radius: 8rpx;
    overflow: hidden;
    margin-bottom: 16rpx;
}

.progress-bar {
    height: 100%;
    background-color: #2196f3;
    border-radius: 8rpx;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #1565c0;
}

.form-group {
    margin-bottom: 32rpx;
}

.form-label {
    display: block;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 12rpx;
}

.form-input,
.form-picker {
    width: 100%;
    padding: 20rpx 24rpx;
    border: 2rpx solid #e2e8f0;
    border-radius: 16rpx;
    font-size: 28rpx;
    transition: all 0.2s;
    box-sizing: border-box;
}

.form-input-container {
    position: relative;
}

.form-input-suffix {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 28rpx;
}

.button-primary {
    background-color: #ff9fb5;
    color: white;
    border: none;
    border-radius: 16rpx;
    padding: 24rpx 0;
    font-size: 32rpx;
    font-weight: 500;
    width: 100%;
    margin-top: 32rpx;
}

.button-secondary {
    background-color: #f5f5f5;
    color: #666;
    border: 2rpx solid #ddd;
    border-radius: 16rpx;
    padding: 16rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    width: 100%;
    margin-top: 32rpx;
}

.tabs {
    display: flex;
    background-color: #f5f5f5;
    border-radius: 16rpx;
    padding: 8rpx;
    margin-bottom: 32rpx;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    font-size: 28rpx;
    border-radius: 12rpx;
    transition: all 0.2s ease;
}

.tab.active {
    background-color: #fff;
    color: #ff9fb5;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.chart-container {
    height: 400rpx;
    position: relative;
}

.chart-y-axis {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 40rpx;
    width: 60rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 10rpx;
}

.y-axis-label {
    font-size: 24rpx;
    color: #999;
}

.chart-area {
    position: absolute;
    top: 0;
    left: 60rpx;
    right: 0;
    bottom: 40rpx;
    border-left: 2rpx solid #eee;
    border-bottom: 2rpx solid #eee;
}

.chart-recommended-range {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    height: 40%;
    background-color: rgba(154, 230, 180, 0.2);
    border-top: 2rpx dashed #68d391;
    border-bottom: 2rpx dashed #68d391;
}

.chart-grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2rpx;
    background-color: rgba(0, 0, 0, 0.03);
}

.weight-line {
    position: relative;
    width: 100%;
    height: 100%;
}

.data-point {
    position: absolute;
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background-color: #ff9fb5;
}

.chart-x-axis {
    position: absolute;
    bottom: 0;
    left: 60rpx;
    right: 0;
    height: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
}

.x-axis-label {
    font-size: 24rpx;
    color: #999;
}

.chart-note {
    text-align: center;
    font-size: 24rpx;
    color: #999;
    margin-top: 16rpx;
}

.record-list {
    border-top: 2rpx solid #f0f0f0;
}

.record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
}

.record-date-label {
    font-size: 28rpx;
    font-weight: 500;
}

.record-date {
    font-size: 24rpx;
    color: #999;
    margin-top: 4rpx;
}

.record-weight {
    text-align: center;
}

.record-weight-value {
    font-size: 28rpx;
    font-weight: 500;
}

.record-weight-unit {
    font-size: 24rpx;
    margin-left: 4rpx;
}

.record-weight-change {
    font-size: 24rpx;
    margin-top: 4rpx;
}

.margin-bottom {
    margin-bottom: 48rpx;
}
</style>
